import React, {Component} from 'react'
import { Card, Button, Row, Col, message, Popconfirm } from 'antd'
import { connect } from 'react-redux';
import NodeBBAccountEditor from './NodeBBAccountEditor'
import constant from '../../constant/index'
import * as actions from '../../action/index';
import newUser from '../../image/newUser.jpeg';
import oldUser from '../../image/oldUser.jpeg';
import {FormattedMessage} from "react-intl";
import {withRouter} from "react-router-dom";

class NodeBBAccount extends Component {
    handleModifyClick = () => {
        this.props.modifyNodeBBEditStatus(constant.NODEBB_EDIT_STATUS.EDIT);
    };
    handleCreateClick = () => {
        this.props.createNewNodeBBUser();
    };
    handleJumpClick = () => {
        if (this.props.user.nodeBBUsername && !this.props.user.errorMessage) {
            return window.open("https://school.thoughtworks.cn/bbs/login", '_self');
        }

        if (!this.props.user.nodeBBUsername) {
            return message.error(<p><FormattedMessage id='您还没有论坛账号，请点击下方创建按钮创建论坛账号' /></p>)
        }

        if (this.props.user.errorMessage) {
            return message.error(<p><FormattedMessage id='您的论坛账号密码不匹配，请点击下方修改按钮修改您的论坛账号' /></p>)
        }
    };

    renderNodeBBAccountInfo = () => {
        return (
            <div id="nodeBB">
                <p><FormattedMessage id='论坛账号' />： {this.props.user.nodeBBUsername}</p>
                <p><FormattedMessage id='论坛密码' />： {this.props.user.nodeBBPassword}</p>
                <p><a target='_self' onClick={this.handleJumpClick}><FormattedMessage id='点此进入论坛' /></a></p>
                <Row className='button-row'>
                    <Col span={8}> <Button type="primary" onClick={this.handleModifyClick}><FormattedMessage id='重新绑定' /></Button></Col>
                    {this.renderCreateNodeBBAccountButton()}
                </Row>



                <Row className='button-row'>
                    <Col span={8}><p><a target="_self" href={newUser}><FormattedMessage id='新用户必看' /></a></p></Col>
                    <Col span={8}><p><a target="_self" href={oldUser}><FormattedMessage id='论坛老用户必看' /></a></p></Col>
                </Row>

            </div>
        )
    };

    renderCreateNodeBBAccountButton = () => {
        const text = <FormattedMessage id='您确定要重新生成论坛账号吗？一旦重新生成，系统就会绑定新的论坛账号，旧的论坛账号将不能通过本系统登录！' />;

        return (
            <Col span={8}> <Popconfirm placement="bottom" title={text} onConfirm={this.handleCreateClick} okText="Yes" cancelText="No">
            <Button type="primary"><FormattedMessage id='生成账号' /></Button>
          </Popconfirm></Col>)
    };

    render = () => {
        return (
            <Card noHovering={true} title={<FormattedMessage id="论坛" />}>
                {this.props.nodeBBEditInfo.status ? <NodeBBAccountEditor /> : this.renderNodeBBAccountInfo()}
            </Card>
        )
    }
}


const mapStateToProps = state => ({
    user: state.user,
    nodeBBEditInfo: state.nodeBBEditInfo
});

const mapDispatchToProps = dispatch => ({
    createNewNodeBBUser: () => {
        dispatch(actions.createNewNodeBBUser());
    },
    modifyNodeBBEditStatus: status => {
        dispatch(actions.modifyNodeBBEditStatus(status))
    }

});


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NodeBBAccount));

